<!DOCTYPE HTML5>
<html>

<head>
   <title>Web Worker</title>
   <script src="fibonacci.js"></script>
</head>

<body>

<table >
  <tr>
   <td>
     <h1>Bouncing Ball</h1>
   </td>
   <td>
     <h1>Fibonacci Javascript</h1>
   </td>
  </tr>
  <tr>
   <td>
     <canvas id="canvas" width="300px" height="300px" style="border:1px solid black"></canvas> 
   </td>
   <td>
     <table>
      <tr>
       <td>Enter Fibocanni Number at Index</td>
       <td><input type="text" id="index" value="40"></input></td>
      </tr>
      <tr>
       <td>Fibocanni Number is </td>
       <td><div id="output"></div></td>
      </tr>
      <tr>
       <td><button id="fibocanni">Fibonacci</button></td>
       <td><button id="fibocanniWorker">Fibonacci Worker</button></td>
      </tr>
      <tr>
      </tr>
     </table> 
   </td>
  </tr>
</table>
<script> 
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    var ballX=100, ballY=200;
    var radius=20;
    var xInc=10;
    var yInc=10;
    setInterval(gameLoop,10); 
 
    function gameLoop(){
      advanceBall();
      clearCanvas();
      drawBall();   
    }
   
    function advanceBall(){
       ballX+=xInc;
       ballY+=yInc;
       if((ballX+radius)>canvas.width){
         xInc = (-1)*xInc;
       }
       if((ballX-radius)<0){
         xInc = (-1)*xInc;
       }
       if((ballY+radius)>canvas.height){
         yInc = (-1)*yInc;
       }
       if((ballY-radius)<0){
         yInc = (-1)*yInc;
       }
    }
    function clearCanvas(){
       ctx.clearRect(0,0,canvas.width,canvas.height);
    }
    function drawBall(){
       ctx.beginPath();
       ctx.arc(ballX, ballY, radius, 0, Math.PI*2, true);
       ctx.closePath();
       ctx.fill();
    }
        
  </script> 
  <script src="app.js"></script>
</body>
</html>
